<template>
    <div>
      <div>
        <Row class="formRow">
          <Col span="2" class="rightRow">
          <span class="ModelInputTitle">消息类型</span>
          </Col>
          <Col span="2" class="leftRow">
            <Select  size="large" style="width:100%" v-model="formInline.msgType">
              <Option  value="1" >短信</Option>
              <Option  value="2" >邮件</Option>
              <Option  value="3" >系统内信</Option>
            </Select>
          </Col>
          <Col span="3" class="rightRow">
            <span class="ModelInputTitle" style="width: 100%">接收方手机号</span>
          </Col>
          <Col span="3" class="leftRow">
            <Input v-model="formInline.phone" placeholder="接收方手机号" clearable style="width:100%" size="large"></Input>
          </Col>
          <Col span="2" class="rightRow">
          <span class="ModelInputTitle">发送状态</span>
          </Col>
          <Col span="3" class="leftRow">
            <Select  size="large" style="width:100%" v-model="formInline.status">
              <Option  value="0" >未成功</Option>
              <Option  value="1" >发送成功</Option>
              <Option  value="2" >发送失败</Option>
            </Select>
          </Col>
          <Col span="2" class="rightRow">
          <span class="ModelInputTitle">是否有效</span>
          </Col>
          <Col span="3" class="leftRow">
            <Select  size="large" style="width:100%" v-model="formInline.isYouxiao">
              <Option  value="1" >是</Option>
              <Option  value="0" >否</Option>
            </Select>
          </Col>
          <Col span="4" class="leftRow">
            <Button type="primary" @click="onSubmit">查询</Button>
            <Button type="primary" @click="resetForm">重置</Button>
            <Button type="primary" @click="onAdd">添加</Button>
          </Col>
        </Row>












      </div>

      <Table :data="tableData" :columns="cloums" stripe :loading="loading"  style="margin-top: 20px"></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="total" :current="1" :placement="placement" @on-change="changePage" show-total show-elevator show-sizer @on-page-size-change="changeSize"></Page>
        </div>
      </div>

      <Modal
        v-model="sendMsg"
        title="发送信息"
        @on-ok="sendOk"
        @on-cancel="cancel('您取消了操作')" width="600">
        <Row>
          <Col span="24">   <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>接收方手机号</span><Input v-model="send.phone" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="多个手机号用逗号隔开。如133...,181..." style="width: 485px" ></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">消息类型</span> <Select  size="large" style="width:200px" v-model="send.type">
          <Option  value="1" >微信</Option>
          <Option  value="2" >APP</Option>
        </Select></Col>
          <Col span="12">   <span class="ModelInputTitle">渠道</span><Select  size="large" style="width:200px" v-model="send.source">
          <Option  value="1" >用户微信端</Option>
          <Option  value="2" >医生APP端</Option>
          <Option  value="3" >护士APP端</Option>
          <Option  value="4" >物流APP端</Option>
        </Select></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="24">   <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>消息内容</span><Input v-model="send.msgContent" type="textarea" :autosize="{minRows: 5,maxRows: 20}"  style="width: 485px"></Input></Col>
        </Row>
      </Modal>

    </div>
</template>
<script type="text/ecmascript-6">
  import axios from "axios"
    export default {
        data() {
            return {
                formInline:{
                  msgType:"",
                  phone:"",
                  status:"",
                  isYouxiao:""
                },
              send:{
                phone:"",
                type:"",
                source:"",
                msgContent:""
              },
              page:1,
              pageSize:10,
              placement:"bottom",
              tableData:[],
              loading:true,
              total:0,
              sendMsg:false,//模态框
              cloums:[
                {
                  title: '消息类型',
                  key: 'msgType',
                  width:100,
                  align:"center"
                },
                {
                  title: '消息内容',
                  key: 'msgContent',
                  width:500,
                  align:"center"
                },
                {
                  title: '接收方',
                  key: 'receiveId',
                  width:120,
                  align:"center"
                },
                {
                  title: '渠道',
                  key: 'source',
                  width:100,
                  align:"center"
                },
                {
                  title: '接收方手机号',
                  key: 'phone',
                  width:120,
                  align:"center"
                },
                {
                  title: '发送方',
                  key: 'sendId',
                  width:120,
                  align:"center"
                },
                {
                  title: '发送状态',
                  key: 'status',
                  width:100,
                  align:"center"
                },
                {
                  title: '发送时间',
                  key: 'sendTime',
                  width:180,
                  align:"center"
                },
                {
                  title: '发送类型',
                  key: 'type',
                  width:100,
                  align:"center"
                },
                {
                  title: '是否有效',
                  key: 'valid',
                  width:120,
                  align:"center"
                },
                {
                  title: '创建人',
                  key: 'creater',
                  width:120,
                  align:"center"
                },
                {
                  title: '修改人',
                  key: 'updater',
                  width:120,
                  align:"center"
                }
              ]
            }
        },
      mounted(){
          this.init();
      },
      methods:{
        init(page,pageSize,msgType,phone,status,valid){
            var qs = require("qs");

            var param = qs.stringify({
              page:page?page:this.page,
              pageSize:pageSize?pageSize:this.pageSize,
              msgType:msgType?msgType:"",
              phone:phone?phone:"",
              status:status?status:"",
              valid:valid?valid:""
            });
          axios.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
            axios.post("/msg/queryBusMsgRecordListByPage",param).then((res)=>{
              if(res.data.code == "000000"){
                this.loading = false;
                this.total = res.data.count;
                for(let i=0;i<res.data.data.length;i++){
                  if(res.data.data[i].msgType=="1"){
                    res.data.data[i].msgType = "短信"
                  }
                  if(res.data.data[i].msgType=="2"){
                    res.data.data[i].msgType = "邮件"
                  }
                  if(res.data.data[i].msgType=="3"){
                    res.data.data[i].msgType = "系统内信"
                  }
                  if(res.data.data[i].source=="1"){
                    res.data.data[i].source = "用户微信端"
                  }
                  if(res.data.data[i].source=="2"){
                    res.data.data[i].source = "医生APP端"
                  }
                  if(res.data.data[i].source=="3"){
                    res.data.data[i].source = "护士APP端"
                  }
                  if(res.data.data[i].source=="4"){
                    res.data.data[i].source = "物流APP端"
                  }
                  if(res.data.data[i].status=="0"){
                    res.data.data[i].status = "未成功"
                  }
                  if(res.data.data[i].status=="1"){
                    res.data.data[i].status = "发送成功"
                  }
                  if(res.data.data[i].status=="2"){
                    res.data.data[i].status = "发送失败"
                  }
                  if(res.data.data[i].type=="1"){
                    res.data.data[i].type = "微信"
                  }
                  if(res.data.data[i].type=="2"){
                    res.data.data[i].type = "APP"
                  }
                  res.data.data[i].valid = res.data.data[i].valid=="1"?"是":"否";
                  res.data.data[i].sendTime = this.format(res.data.data[i].sendTime);
                }
                this.tableData =  res.data.data
              }else{
                this.$Notice.error({title:res.data.msg})
              }
            })
        },
        onSubmit(){
          this.init(this.page,this.pageSize,this.formInline.msgType,this.formInline.phone,this.formInline.status,this.formInline.isYouxiao);
        },
        resetForm(){
          this.formInline.msgType = "";
          this.formInline.phone = "";
          this.formInline.status = "";
          this.formInline.isYouxiao = "";
          this.page = 1;
          this.pageSize = 10;
        },
        onAdd(){
          this.sendMsg = true;
        },
        format(date){
          var d = new Date(date);
          var year = d.getFullYear();
          var month = parseInt(d.getMonth())+1>9?parseInt(d.getMonth())+1:"0"+(parseInt(d.getMonth())+1);
          var day = d.getDate()>9?d.getDate():"0"+d.getDate();
          var h = d.getHours()>9?d.getHours():"0"+d.getHours();
          var m =  d.getMinutes()>9?d.getMinutes():"0"+d.getMinutes();
          var s = d.getSeconds()>9?d.getSeconds():"0"+d.getSeconds();
          return year+"-"+month+"-"+day+" "+h+":"+m+":"+s;
        },
        changePage(page){
          this.page = page;
          this.loading = true;
          this.init();
        },
        changeSize(size){
          this.placement = size>=20?"top":"bottom";
          this.pageSize = size;
          this.loading = true;
          this.init();
        },
        cancel (msg) {
          this.$Notice.info({title:msg});
        },
        sendOk(){
          var _this = this;
            var qs = require("qs");
            var param = qs.stringify({
              phone:_this.send.phone,
              msgContent:_this.send.msgContent,
              type:_this.send.type,
              source:_this.send.source
            })
          axios.post("/msg/addBusMsgRecord",param).then((res)=>{
              console.log(res.data)
            if(res.data.code =="000000"){
              _this.$Notice.success({title:"添加成功"});
              _this.init();
            }else{
              _this.$Notice.error({title:res.data.msg})
            }
          })
        }
      }
    }
</script>
